<template>
  <div>
    <!--面包屑模块-->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="padding: 10px">
      <el-breadcrumb-item :to="{ path: '/manage/' + this.id }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>班级管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card>
      <!--搜索区域-->
      <el-col :span="24">
        <el-col :span="15">
          <el-input placeholder="请输入班级名称查询" style="margin-bottom: 10px" v-model="queryInfo.query" clearable>
            <el-button slot="append" icon="el-icon-search" @click="getClassList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" style="margin-left: 15px" @click="addClass">添加班级</el-button>
        </el-col>
      </el-col>
      <!-- 表格显示区 -->
      <el-table :data="classList" border style="width: 100%" ref="filterClass" stripe>
        <el-table-column prop="className" label="班级名称" width="150"></el-table-column>
        <el-table-column prop="numberOfStudents" label="班级学生人数" width="150"></el-table-column>
        <el-table-column prop="teacherID" label="教师工号" width="200"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-tooltip effect="dark" content="修改信息" placement="top" :enterable="false">
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="editClass(scope.row.className)"></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除信息" placement="top" :enterable="false">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteClass(scope.row.className)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页功能 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryInfo.pageNum" :page-sizes="[2, 3, 5, 10]" :page-size="queryInfo.pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
    <!--   注册班级对话框   -->
    <el-dialog title="注册班级" :visible.sync="addClassDialogVisible" width="50%" @close="addClassDialogClosed">
      <el-form :model="addClassForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="班级名称">
          <el-input v-model="addClassForm.className" style="width: 30%"></el-input>
        </el-form-item>
        <el-form-item label="学生人数" >
          <el-input v-model="addClassForm.numberOfStudents" style="width: 30%"></el-input>
        </el-form-item>
        <el-form-item label="教师工号">
          <el-select v-model="addClassForm.teacherID" placeholder="请选择教师">
            <el-option
              v-for="teacher in teacherInfoList"
              :key="teacher.teacherID"
              :label="teacher.teacherID + '   ' + teacher.name"
              :value="teacher.teacherID"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="addClassDialogClosed">取消</el-button>
          <el-button type="primary" @click="submitAddClassForm">确定</el-button>
        </span>
    </el-dialog>
    <!--   修改班级对话框   -->
    <el-dialog title="注册班级" :visible.sync="editClassDialogVisible" width="50%" @close="editClassDialogClosed">
      <el-form :model="editClassForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="班级名称">
          <el-input disabled v-model="editClassForm.className" style="width: 30%"></el-input>
        </el-form-item>
        <el-form-item label="学生人数" >
          <el-input v-model="editClassForm.numberOfStudents" style="width: 30%"></el-input>
        </el-form-item>
        <el-form-item label="教师工号">
            <el-select v-model="editClassForm.teacherID" placeholder="请选择教师">
              <el-option
                v-for="teacher in teacherInfoList"
                :key="teacher.teacherID"
                :label=" teacher.teacherID + '  ' + teacher.name"
                :value="teacher.teacherID"
              />
            </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="editClassDialogClosed">取消</el-button>
          <el-button type="primary" @click="submitEditClassForm">确定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'MangeUserClass',
  data () {
    return {
      id: '',
      // 查询信息
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 5
      },
      classList: [],
      total: 0,
      teacherInfoList: [],
      // 添加班级
      addClassDialogVisible: false,
      addClassForm: {
        className: '',
        numberOfStudents: null,
        teacherID: ''
      },
      // 编辑班级信息
      editClassDialogVisible: false,
      editClassForm: {
        className: '',
        numberOfStudents: null,
        teacherID: ''
      }
    }
  },
  created () {
    this.id = parseInt(this.$route.params.id)
    this.activePath = window.sessionStorage.getItem('activePath')
    this.getClassList()
  },
  methods: {
    // 获取班级信息
    getClassList () {
      this.$http.get('/class/showPage', {
        params: this.queryInfo
      }).then(({ data: res }) => {
        console.log(res)
        if (res.code !== 200) {
          this.$message.error('读取班级信息失败')
        } else {
          this.classList = res.data
          this.total = res.total
        }
      })
    },
    // 页面选择
    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize
      this.getClassList()
    },
    handleCurrentChange (newPage) {
      this.queryInfo.pageNum = newPage
      this.getClassList()
    },
    // 获取教师信息
    acquireTeacher () {
      this.$http.get('/teacher/acquireInfo').then(({ data: res }) => {
        this.teacherInfoList = res.data
        console.log(this.teacherInfoList)
      })
    },
    // 添加班级
    addClass () {
      this.addClassDialogVisible = true
      this.acquireTeacher()
    },
    // 提交添加班级
    submitAddClassForm () {
      // 插入班级
      this.$http.post('/class/insert', this.addClassForm).then(({ data: res }) => {
        if (res.code === 200) {
          this.$message.success('添加班级成功')
          this.addClassDialogVisible = false
          this.getClassList()
          this.addClassForm = {
            className: '',
            numberOfStudents: null,
            teacherID: ''
          }
        }
      })
    },
    // 关闭对话框
    addClassDialogClosed () {
      this.addClassDialogVisible = false
      this.addClassForm = {
        className: '',
        numberOfStudents: null,
        teacherID: ''
      }
    },
    // 编辑班级信息
    editClass (className) {
      console.log(className)
      this.$http.get('/class/queryClass', {
        params: { className: className }
      }).then(({ data: res }) => {
        this.editClassForm = res.data
        this.editClassDialogVisible = true
        this.acquireTeacher()
      })
    },
    // 提交编辑班级信息
    submitEditClassForm () {
      this.$http.put('/class/update', this.editClassForm).then(({ data: result1 }) => {
        if (result1.code === 200) {
          this.$message.success('修改班级信息成功')
          this.editClassDialogVisible = false
          this.editClassForm = {
            className: '',
            numberOfStudents: null,
            teacherID: ''
          }
          this.getClassList()
        }
      })
    },
    // 关闭对话框
    editClassDialogClosed () {
      this.editClassDialogVisible = false
      this.editClassForm = {
        className: '',
        numberOfStudents: null,
        teacherID: ''
      }
      this.getClassList()
    },
    async deleteClass (className) {
      const res = await this.$confirm('此操作将永久删除班级, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 用户取消删除就返回res
      if (res !== 'confirm') {
        this.$message.info('取消删除')
      } else {
        this.$http.delete('/class', {
          params: { className: className }
        }).then(({ data: result }) => {
          if (result.code !== 200) {
            this.$message.error('删除教师失败')
          } else {
            this.$message.success('删除教师成功')
            this.getClassList()
            // 刷新页面
            window.location.reload() // 完全刷新页面
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="less">

</style>
